{% extends 'editor/elements/base_exercise.html' %}

{% block element_type %}match{% endblock %}

{% block element_class %}
    match-exercise
{% endblock %}

{% block content %}

    <div class="columns">
        {% for column in columns %}
            <div class="column" data-id="{{ column.id }}">
                <header class="column-head">
                    <div class="button button-remove-secondary button-remove-column"></div>
                    <input value="{{ column.content }}" type="text" class="column-title">
                </header>
                <div class="variants {% if not column.get_variants|length %}hidden{% endif %}">
                    {% for variant in column.get_variants %}
                        <div class="variant" data-id="{{ variant.id }}">
                            <hr class="line">
                            <div class="button button-remove-secondary button-remove-variant"></div>
                            <input value="{{ variant.content }}" type="text" class="variant-content">
                        </div>
                    {% endfor %}
                    <hr class="line-vertical">
                </div>
                <div class="button button-secondary-reverse button-add-variant">Добавить новый вариант</div>
            </div>
        {% endfor %}
    </div>

    <p class="description-wrong-variants {% if not exercise.get_wrong_variants|length %}hidden{% endif %}" style="font-weight: bold">Лишние варианты: </p>

    <div class="wrong-variants">
        {% for variant in exercise.get_wrong_variants %}
            <div class="variant" data-id="{{ variant.id }}">
                <div class="button button-remove-secondary button-remove-variant"></div>
                <input value="{{ variant.content }}" type="text" class="variant-content">
            </div>
        {% endfor %}
    </div>

    <p class="description {% if columns|length %}hidden{% endif %}">Пока здесь нет ни одной колонки</p>

{% endblock %}

{% block buttons_bar %}
    <div class="button button-secondary-reverse button-add-column">Добавить колонку</div>
    <div class="button button-secondary-reverse button-add-wrong-variant">Добавить вариант</div>
{% endblock %}
